<template>
	<view class="searc-tab-warp">
		<view class="searc-tab">
			<view class="search-area">
				<text class="search-icon icon iconfont iconguanjiaowangtubiao22"></text>
				<view class="placeholder" v-if="placeHoderShow&&keyWord==''">
					{{placeHoder}}
				</view>
				<input confirm-type="search" @confirm="confirmInputSearch" class="search-input" v-model="keyWord" type="text"
				 :focus="showFocus" @focus='hiddenplaceholder' @blur='showplaceholder'  />

				<view v-show="keyWord.length>0" class="search-clear-icon" @click="clearSearchInput">
					<text v-show="keyWord.length>0" class="icon iconfont iconqingkong"></text>
				</view>
				<text @click="searchClick" class="search-input-text">搜索</text>
			</view>
			<view v-if="showCate" class="search-cate">
				<block v-for="(item,index) in cateList" :key="index">
					<view @click="filterCate" :data-index="index" :class="[currentCateIndex == index?'search-cate-item-active':'search-cate-item',index===2?'last-item':'']">
						{{item.name}}
					</view>
				</block>
			</view>
		</view>
		<!-- {{"searchKeyWord"+searchKeyWord}} -->
		<!-- 	<view v-if="showCate" class="search-main-contain">
			<view class="search-main-top-contain">
				<view class="search-main-top-contain-in">

				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			currentCateIndex: {
				type: Number,
				default: 0
			},
			searchKeyWord: {
				type: String,
				default: ''
			},
			showCate: {
				type: Boolean,
				default: true
			},
			showFocus: {
				type: Boolean,
				default: true
			},
			placeHoder: {
				type: String,
				default: '请输入你想了解的内容'
			},
			background: {
				type: String,
				default: 'rgba(243, 243, 243, 1)'
			}
		},
		data() {
			return {
				keyWord: '',
				currentIndex: 0,
				placeHoderShow: false,
				cateList: [{
						name: '项目技术',
						id: 'xm'
					},
					{
						name: '专家',
						id: 'zj'
					},
					{
						name: '活动',
						id: 'hd'
					},
				]
			};
		},
		methods: {
			// inputVal(e) {
			// 	this.keyWord = e.detail
			// },
			hiddenplaceholder(){
				this.placeHoderShow = false
			},
			showplaceholder(){
				this.placeHoderShow = true
			},
			confirmInputSearch(event) {
				this.searchClick();
			},
			clearSearchInput() {
				console.log('清空');
				this.keyWord = '';
				this.$emit('searchClear', {
					keyWord: this.keyWord
				})
			},
			searchClick() {
				console.log("this.keyWord", this.keyWord);
				let param = {
					keyWord: this.keyWord,
					cateItem: this.cateList[this.currentIndex].id,
					cateIndex: this.currentIndex
				}
				console.log('param', param);
				this.$emit('searchEvent', param);
				// uni.navigateTo({
				// 	url: '/pages/search-detail/search-detail'
				// })
			},
			filterCate(e) {
				console.log(e.currentTarget.dataset.index);
				this.$emit('currentCateClick', e.currentTarget.dataset.index);
				this.currentIndex = e.currentTarget.dataset.index;
			}
		},
		mounted() {
			this.keyWord = this.searchKeyWord;
		}
	}
</script>

<style scoped>
	.searc-tab-warp {
		width: 100%;
	}

	.searc-tab {
		width: 100%;
		/* height: 182upx; */
		background-color: rgba(243, 243, 243, 1);
		padding: 14upx 39upx 14upx 30upx;
	}

	.search-area {
		position: relative;
		display: flex;
		align-items: center;
	}

	.placeholder {
		position: absolute;
		left: 95upx;
		color: rgba(187, 187, 187, 1);
	}

	.search-input {
		width: 580upx;
		height: 72upx;
		margin-right: 24upx;
		border-radius: 36upx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 0 66upx 0 92upx;
		font-size: 30upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.search-input-text {
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(42, 125, 250, 1);
	}

	.search-icon {
		position: absolute;
		/* top: 15upx; */
		left: 42upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(187, 187, 187, 1);
	}

	.search-clear-icon {
		position: absolute;
		top: 0upx;
		right: 120upx;
		font-size: 28upx;
		height: 100%;
		/* border: 1px solid black; */
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(187, 187, 187, 1);
		display: flex;
		align-items: center;
		z-index: 10;
	}

	.search-cate {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 26upx;
	}

	.search-cate-item-active {
		color: rgba(42, 125, 250, 1);
		margin-right: 103upx;
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.search-cate-item {
		margin-right: 103upx;
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(155, 155, 155, 1);
	}

	.last-item {
		margin-right: 0upx;
	}

	.search-main-contain {
		width: 100%;


	}

	.search-main-top-contain {
		width: 100%;
		height: 30upx;
		background-color: rgba(243, 243, 243, 1);
	}

	.search-main-top-contain-in {
		width: 100%;
		height: 30upx;
		background-color: #FFFFFF;
		border-radius: 20upx 20upx 0 0;
	}
</style>
